<template>
    <div>
        <Top></Top>
        <el-row>
            <el-col :sapn="18" :offset="3">
                <!-- 进度条 -->
                <div class="step step1 mt10 clearfix">
                    <span class="fs14 fff">1.查看购物车</span>
                    <span class="fs14">2.确认订单信息</span>
                    <span class="fs14">3.付款</span>
                    <span class="fs14">4.确认收货</span>
                    <span class="fs14">5.评价</span>
                </div>
                <!-- 购物车表格 -->

                <div id="tableDiv">
                 
                    <template>
                        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column label="缩略图" width="150px">
                                <template slot-scope="scope">
                                    <img :src="scope.row.pic" style="width:90px;height:90px"></img>
                                </template>
                            </el-table-column>
                            <el-table-column label="店铺商品" width="150px" align="center">
                                <template slot-scope="scope">
                                    <!--                       <i class="el-icon-time"></i>-->
                                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="类型" width="140" align="center">
                                <template slot-scope="scope">

                                    <el-tag size="medium">{{ scope.row.type }}</el-tag>

                                </template>
                            </el-table-column>
                            <el-table-column label="数量" width="150" align="center">
                                <template slot-scope="scope">
                                    <el-input-number v-model="scope.row.num"  :min="1"  size="mini"></el-input-number>
                                </template>
                            </el-table-column>

                            <el-table-column label="售价" width="150" align="center">
                                <template slot-scope="scope">

                                    <span style="margin-left: 10px">{{ (scope.row.salePrice).toFixed(2) }}元/{{scope.row.uname}}</span>

                                </template>
                            </el-table-column>


                            <el-table-column label="小计" width="150" align="center">
                                <template slot-scope="scope">

                                    <span style="margin-left: 10px">{{ (scope.row.salePrice * scope.row.num).toFixed(2) }}</span>

                                </template>
                            </el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                   
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>

                <!--结算栏  -->
                <el-row style="margin-top: 20px;">
                    <el-col :span="4" :offset="16">
                        <span class="price" style="margin-right: 20px;">{{getTotalPrice().toFixed(2)}} 元</span>
                        <el-button type="success" @click="pay">去结算</el-button>
                    </el-col>

                </el-row>

                <!-- 分页 -->
                <div class="block" style="text-align: center">
                     <el-pagination @size-change="handleSizeChange" 
                                    @current-change="handleCurrentChange"
                                    :current-page="page" :page-sizes="[5, 10]" 
                                    :page-size="size"
                                    layout="prev, pager, next, jumper,total, sizes" 
                                    :total="total">
                    </el-pagination>
                </div>


            </el-col>


        </el-row>

        <Footer></Footer>


    </div>



</template>

<script>
import Top from '../commons/Top.vue'
import Footer from '../commons/Footer.vue'
import { Image } from "element-ui";
export default {
    data() {
        return {
            tableData: [],
            selections:[],
            page: 1,
            size: 5,
            total: 0,
            totalPage: 0
        }

    },
    methods: {
        handleSelectionChange(rows) {
            this.selections=rows;
         
        },
        //page-sizes与page-size各自控制不同的页面变量，将其绑定，就可实现二者控制的变量一致
        handleSizeChange(val) {
            //将每页条数选择器中的值赋给page-size
            this.size = val;
            //重新刷新页面
            this.getData()


        },

        //虽然页数列表中的值改变了，但是没有监听事件无法实时对页面做出改变
        handleCurrentChange(val) {
            //将pager列表中当前页的值赋给page
            this.page = val;
            //重新刷新页面
            this.getData();

        },
        //表格中数据删除
        handleDelete(index,row){
           this.$axios.delete("/cart/delete",{params:{id:row.id,num:row.num}}).then(respData=>{
            console.log("购物车删除按钮事件返回值打印")
            console.log(respData)
            if(respData.data==200)
            this.$message.success("删除成功！")
            this.getData()
           })
        },
        getData() {
            this.$axios.get("/cart/findAll/" + this.page + "/" + this.size).then(respData => {
                console.log("cartVue中mounted查询购物车列表打印结果")
                console.log(respData)
                this.tableData = respData.data.data.data
                this.page = respData.data.data.page
                this.size = respData.data.data.size
                this.total = respData.data.data.total
            });
        },
        getTotalPrice(){
            let total=0;
            for(const cart of this.selections){
                   total+=cart.num*cart.salePrice
            }
            return total
        },
        pay(){
            if(this.selections.length==0){
                this.$message.error("请至少选择一件商品！")
            }else{
                //存储在sessionStorage中的必须是JSON字符串
                sessionStorage.setItem("carts",JSON.stringify(this.selections))

                this.$router.push("/orderConfirm")

            }
            

        }
    },
    mounted() {
        this.getData()
    },

    components: {
        Top, Footer

    }

}
</script>


<style scoped>
.price{
    color:red;
    font-size:30px
}
</style>